<template>
  <div>
    <div class="main_label">
      <span>PK数据</span>
    </div>
    <Tabs v-model="pkTabVal" :animated="false" type="line" name="pkTab" @on-click="changeTabs">
      <TabPane label="线索" name="1" tab="pkTab" v-if="pkDataFlagObj?.clueStatus == 1"></TabPane>
      <TabPane label="来人" name="2" tab="pkTab" v-if="pkDataFlagObj?.arrivePeopleStatus == 1"></TabPane>
      <TabPane label="成交" name="3" tab="pkTab" v-if="pkDataFlagObj?.clinchDealStatus == 1"></TabPane>

      <template #extra>
        <span @click="checkChart('1')" class="check_chart" v-if="optionBar && optionBar.series">
          <Icon type="md-stats" />
          查看完整图表
        </span>
        <span @click="changeMode('1')" class="check_chart" v-else>立即维护</span>
      </template>
    </Tabs>
    <div style="height: 250px">
      <chart-block ref="pkChart"></chart-block>
    </div>
  </div>
</template>

<script>
  import chartBlock from '@/components/echarts/eChartsBlock.vue'
  import chartsOption from '@/biz/buildingHome/charOption'
  import dailyChartsApi from '@/biz/buildingHome/dailyCharts'
  import dailyApi from '@/biz/buildingHome/home'

  import dailyPkApi from '@/biz/buildingHome/daily'

  export default {
    components: {
      chartBlock
    },
    data() {
      return {
        pkTabVal: '1',
        odlTabVal: '1',
        optionBar: null,
        dateInfo: {},
        pkDataFlagObj: null
      }
    },
    methods: {
      findDailyGenerationAllocationHomePage() {
        let params = {
          buildingId: this.$dt.buildInfo().housesId
        }
        dailyPkApi.findDailyGenerationAllocationHomePage(params).then((res) => {
          console.log(res, 'pk')
          this.pkDataFlagObj = res
        })
      },
      checkChart(type) {
        console.log(type)
        this.$emit('handelClick', { type })
      },
      changeMode(type) {
        this.$emit('changeMode', type)
      },
      changeTabs(val) {
        if (this.odlTabVal == val) return false
        this.odlTabVal = val
        this.getinfoData(this.dateInfo)
      },
      getinfoData(data) {
        this.findDailyGenerationAllocationHomePage()
        console.log(data, 'vv')
        this.dateInfo = data
        this.$refs.pkChart.showLoading()
        let option = null

        let params = {
          type: 'optionBar',
          checkTime: dailyApi.resovleTime(5, data.currentDate),
          chartsType: '1',
          TabVal: this.pkTabVal,
          unit: this.pkTabVal == 1 ? '组' : '套',
          page_type: 'list'
        }
        dailyChartsApi.getInfoData(params).then((res) => {
          if (res.option.series.length) {
            option = res.option
            this.optionBar = res.option
            console.log(option, 'option++++++')
            this.$refs.pkChart.setOption(option)
          } else {
            let text = dailyChartsApi.noDataTxt(1)
            option = chartsOption.noData(text)
            this.optionBar = null
            this.$refs.pkChart.setOption(option)
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .main_label {
    display: flex;
    justify-content: space-between;
    line-height: 20px;
    border-left: 5px solid #2b85e4;
    padding-left: 8px;
    font-size: 15px;
    margin-bottom: 15px;

    .delete_btn {
      color: #2d8cf0;
      cursor: pointer;
      margin-right: 10px;
      font-size: 13px;
    }
  }

  .check_chart {
    line-height: 36px;
    color: #2b85e4;
    margin-right: 20px;
    cursor: pointer;
  }
</style>
